<template>
<div class="dialog">
    <div class="dialog-con createGoodsInfo">
       <split-vertical title="新建商品信息"></split-vertical>
        <div class="goods-detail" style="margin: 0 10px;">
            <div class="info-goods">
                <el-form ref="form" :model="form"  :rules="rules" label-width="80px"  label-position="right" >
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="品牌" prop='brandCode' style="margin-top:20px;">
                        <el-select v-model.trim="form.brandCode" filterable placeholder="请选择" >
                          <el-option
                            v-for="item in brandList"
                            :key="item.id"
                            :label="item.bname"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="商品货号" prop="productCode" style="margin-top:20px;">
                        <el-input v-model.trim="form.productCode"  placeholder="必输项" @blur="getproductCode(form.productCode)"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                       <el-form-item label="种类" class="type" prop="productType">
                         <el-select v-model.trim="form.productType" filterable placeholder="请选择" @change="categoryList" style="width: 50%;" >
                           <el-option
                             v-for="item in category"
                             :key="item.id"
                             :label="item.categoryName"
                             :value="item.id">
                           </el-option>
                         </el-select>
                         <el-select v-model.trim="form.categoryName" filterable placeholder="请选择"  style="width: 49%;" >
                           <el-option
                             v-for="item in typeList"
                             :key="item.id"
                             :label="item.categoryName"
                             :value="item.id">
                           </el-option>
                         </el-select>
                       </el-form-item>

                      <el-form-item label="商品名称" prop="productName">
                        <el-input v-model.trim="form.productName"  placeholder="必输项"></el-input>
                      </el-form-item>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="单位" prop="productUnit">
                          <el-select v-model.trim='form.productUnit' filterable placeholder="请选择">
                            <el-option
                              v-for="item in product"
                              :key="item.id"
                              :label="item.value"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="重量(kg)" prop="productWeight">
                          <el-input v-model.trim="form.productWeight" placeholder="必输项" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="长(cm)" prop="length">
                        <el-input v-model.trim="form.length" placeholder="必输项"  oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="宽(cm)" prop="width">
                        <el-input v-model.trim="form.width"  placeholder="必输项" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
                      </el-form-item>
                    </el-col>

                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="高(cm)" prop='height'>
                        <el-input v-model.trim="form.height"  placeholder="必输项" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="条形码" prop='barCode'>
                        <el-input v-model.trim="form.barCode"  placeholder="请输入" ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-form-item  style="width:95%;text-align: center">
                    <el-button type="primary" @click="submitForm('form')" :disabled="isCreate" size="medium">提交</el-button>
                    <el-button @click="returnGood"  size="medium">取消</el-button>
                  </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import regular from 'js/regular'
import {localStorage} from "js/localStorage"
import SplitVertical from "components/common/SplitVertical"
export default {
    inject:['reload'],
    components:{
      SplitVertical
    },
    data(){
        return{
            uri:'',
            abc:'',
            code:'',
            //后台接口返回的图片保存地址
            imageUrl:'',
            imgData: {
                accept: 'image/gif, image/jpeg, image/png, image/jpg',
            },
            color:'',
            val:'',
            brandName:'',
            category:[],
            product:[],
            typeList:[],
            brandList:[],
            sizeList:[],
            productType:'',
            //创建按钮是否disabled
            isCreate:false,
            form:{
                 //品牌编码
                brandCode:'',
                //商品种类
                productType:'',
                //商品货号
                productCode:'',
                //商品名称
                productName:'',
                //单位
                productUnit:'',
                //重量
                productWeight:'',
                //长宽高
                length:'',
                width:'',
                height:'',
                //属性
                productSize:'',
                //颜色
                color:'',
                //性别
                sex:'',
                //容积
                volume:'',
                //材质
                material:'',
                //风格
                style:'',
                //型号
                model:'',
                //厚度
                thickness:'',
                chinese:'',
                english:'',
                man:'',
                woman:'',
                size:'',
                barCode:''

            },
            rules: {
                width: [
                    { required: true, message: '请输入商品宽度', trigger: 'change' },
                ],
                height: [
                    { required: true, message: '请输入商品高度', trigger: 'change' }
                ],
                barCode:[
                    { required: true, message: '请输入条形码', trigger: 'change' }
                ],
                length: [
                    { required: true, message: '请输入商品长度', trigger: 'change' }
                ],
                brandCode: [
                    { required: true, message: '请选择品牌', trigger: 'change' }
                ],
                productType: [
                    { required: true, message: '请选择商品种类', trigger: 'change' }
                ],
                productUnit: [
                    { required: true, message: '请选择商品单位', trigger: 'change' }
                ],
                productCode: [
                    { required: true, message: '请输入商品货号', trigger: 'change' }
                ],
                productName: [
                    { required: true, message: '请输入商品名称', trigger: 'change' },
                    { min: 3, max: 40, message: '长度在 3 到 40 个字符', trigger: 'blur' }
                ],
                productUnit:[
                    { required: true, message: '请选择商品单位', trigger: 'change' }
                ],
                productWeight:[
                    {required:true,message:'请输入商品重量',trigger:'change'}
                ]
            }
        }
    },
    created(){
       this.init()
       this.userId=localStorage.get("userID")
    },
  watch:{
    'form.productType': function (val,ss) {

    }
  },
    methods:{
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        init(){
            this.productList()
            this.get()
            this.selectBrand()
            this.sizeSelectList()
        },
        //商品分类接口
        categoryList(val){
            let parmas={
               fatherId:val
            }
            let success=data=>{
                if(data.code=='OK'){
                   this.typeList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getCategory(parmas,success)
        },
        returnGood(){
          this.$emit("closeDialog")
        },
        //商品货号禁止重复
        getproductCode(val){
            this.val=val
        },
        //商品品牌下拉框
       selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                    this.brandList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getBrandDetail({},success)
        },
        get(){
            let parmas={
               fatherId:0
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.category=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getCategory(parmas,success)
        },
        //单位下拉框
        productList(){
            let parmas={
                fieldCode:'product_unit'
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.product=data.data
                }
            }
            this.api.getValue(parmas,success)
        },
        //尺寸下拉框
        sizeSelectList(){
            let parmas={
                fieldCode:'measure'
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.sizeList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getValue(parmas,success)
        },
        confirm(){
            if(this.form.productWeight >= 20){
                return this.$message.warning("请输入20公斤以下的数字")
            }
            if(!regular.weight(this.form.productWeight)){
                return this.$message.warning("请输入正整数和小数")
            }
            let parmas={
                brandCode:this.form.brandCode,
                brandId:this.form.brandCode,
                productType:this.form.productType,
                categoryName:this.form.categoryName,
                productCode:this.form.productCode,
                productName:this.form.productName,
                productUnit:this.form.productUnit,
                productWeight:this.form.productWeight,
                length:this.form.length ,
                width:this.form.width,
                height:this.form.height,
                barCode:this.form.barCode,
                productSize:{
                    color:this.form.color,
                    material:this.form.material,
                    size:this.form.size,
                    style:this.form.style,
                    model:this.form.model,
                    sex:this.form.sex,
                    thickness:this.form.thickness,
                    chinese:this.form.chinese,
                    english:this.form.english,
                    volume:this.form.volume,
                },
                picture:this.imageUrl,
                userId:this.userId
            }
            this.isCreate=true
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('创建新商品成功')
                    this.isCreate=false
                    this.$emit("closeDialog")
                    this.reload()
                }else{
                    this.$message.error(data.msg)
                    this.isCreate=false
                }
            }
            this.api.productAdd(parmas,success)
        },
    }
}
</script>


<style lang="scss" scoped>
.createGoodsInfo{
  width:600px;
  height:540px;
    .content{
        .title{
          font-size:15px;
          height:45px;
          line-height:45px;
          span{
              display: inline-block;
              font-size:16px;
              height:30px;
              line-height:45px;
              color:#606266;
          }
        }
        .goods-detail{
            .info-goods{
                .el-input{
                  width:100%;
                }
                .el-select{
                  width:100%;
                }
            }
        }
        .createshopinfomation{
            width:100%;
            text-align:center;
            margin-top:5%;
            button{
                margin:20px 30px;
            }
        }
    }
}
</style>
